h3 Grid Masonry
  small Pure CSS and mobile first with a fallback to inline grid.

.row-masonry.row-masonry-xl-6.row-masonry-lg-4.row-masonry-md-3.row-masonry-sm-2
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Aenean scelerisque suscipit arcu a consectetur. 
  .col-masonry
    .box-placeholder.m0
      p.text-center.text-muted: strong Masonry Item
      p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 

h4.page-header Masonry with any kind of element
.row-masonry.row-masonry-md-4.row-masonry-sm-2
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg1.jpg",alt="")
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg4.jpg",alt="")
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg2.jpg",alt="")
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg5.jpg",alt="")
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg6.jpg",alt="")
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg7.jpg",alt="")
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg8.jpg",alt="")
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg9.jpg",alt="")
  .col-masonry
    img.img-thumbnail.img-responsive(src="app/img/bg10.jpg",alt="")

p Supported from IE10. 
  a(href="http://caniuse.com/#feat=multicolumn") Can I Use.